import React, { useState } from 'react';
import { Radio } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const PieType = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const [ type, setType ] = useState( config.data.pieType || 'pie' );

	const handleContentChange = ( event ) => {
		setType( event.target.value );
		form.setFieldsValue( { pieType: event.target.value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ) , 'data' );
	};
	return (

		<FormItem label="类型" name="pieType">
			<Radio.Group value={ type } defaultValue={ type } onChange={ handleContentChange }>
				<Radio value="pie">饼图</Radio>
				<Radio value="circle">环图</Radio>
			</Radio.Group>
		</FormItem>


	);
};

export default React.memo( PieType );
